<template>
	<cu-custom bgColor="" :isBack="true">
		<template #title>责任学校</template>
	</cu-custom>
	
	<view class="page-content">
		<view class="mb-3" v-for="(item, index) in dataList" :key="index">
			<SchoolLabel :school-info="item" />
		</view>
	</view>
	
	<view class="cu-load text-gray" :class="status === 'loading' ? 'loading' : 'over'"></view>
	
</template>

<script lang="ts" setup>
import { getSchool, getSchoolDetail } from "@/api/school.js"
import { onMounted, ref, Ref } from 'vue';
import SchoolLabel from "./components/SchoolLabel.vue"
import store from "@/store/index.js"
import { ISchool } from "@/interface/ISchool"

const status:Ref<string> = ref("loadmore")
const dataList:Ref<ISchool[]> = ref([] as ISchool[])

const searchValue:Ref<string> = ref("")
let searchable = false
const inputChange = ():void => {
	searchable = true
}
const handleSearch = ():void => {
	if (!searchable) return
	searchable = false
	loadData()
}
const loadData = () => {
	dataList.value = []
	status.value = "loading"
	getSchool()
		.then(async (res) => {
			const data = res.data
			if (data.length === 0) {
				status.value = "over"
			}
			
			for (let school of data) {
				getSchoolDetail(school.id)
					.then((detail: any) => {
						dataList.value.push({
							id: school.id,
							name: school.name,
							// tags: string[],
							principal_phone: school.contact,
							principal: school.principal,
							teacherCount: detail.staffTotal,
							studentCount: detail.studentTotal,
							contact_name: detail.schoolContactName,
							contact_phone: detail.schoolContactPhoneNumber,
							superintendents: detail.superintendents
						})
						if (dataList.value.length === data.length) {
							status.value = "over"
						}
					})
			}
			
		})
}

onMounted(() => {
	loadData()
})


</script>

<style lang="stylus">

</style>